<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title href="">详细二手房</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">预约选项</h4>
            </div>
            <form action="/add_appointment" method="post" id="appointment_form">
                <div class="modal-body">
                    <span>请选择预约时间:&nbsp;</span>
                    <div class="btn-group">
                        <button id="yearxiala" class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            2018<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#6" onclick="year(this)">2018</a></li>
                        </ul>
                        <script>
                            function year() {
                                document.getElementById("yearxiala").innerHTML="2018<span class=\"caret\"></span>";
                            }
                        </script>
                    </div>
                    <span>年</span>

                    <div class="btn-group">
                        <button id="monthxiala" class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            08<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#6" onclick="month01(this)">01</a></li>
                            <li><a href="#6" onclick="month02(this)">02</a></li>
                            <li><a href="#6" onclick="month03(this)">03</a></li>
                            <li><a href="#6" onclick="month04(this)">04</a></li>
                            <li><a href="#6" onclick="month05(this)">05</a></li>
                            <li><a href="#6" onclick="month06(this)">06</a></li>
                            <li><a href="#6" onclick="month07(this)">07</a></li>
                            <li><a href="#6" onclick="month08(this)">08</a></li>
                            <li><a href="#6" onclick="month09(this)">09</a></li>
                            <li><a href="#6" onclick="month10(this)">10</a></li>
                            <li><a href="#6" onclick="month11(this)">11</a></li>
                            <li><a href="#6" onclick="month12(this)">12</a></li>
                        </ul>
                        <script>
                            function month01() {
                                document.getElementById("monthxiala").innerHTML="01<span class=\"caret\"></span>";
                                document.getElementById("month").value=1;
                            }
                            function month02() {
                                document.getElementById("monthxiala").innerHTML="02<span class=\"caret\"></span>";
                                document.getElementById("month").value=2;
                            }
                            function month03() {
                                document.getElementById("monthxiala").innerHTML="03<span class=\"caret\"></span>";
                                document.getElementById("month").value=3;
                            }
                            function month04() {
                                document.getElementById("monthxiala").innerHTML="04<span class=\"caret\"></span>";
                                document.getElementById("month").value=4;
                            }
                            function month05() {
                                document.getElementById("monthxiala").innerHTML="05<span class=\"caret\"></span>";
                                document.getElementById("month").value=5;
                            }
                            function month06() {
                                document.getElementById("monthxiala").innerHTML="06<span class=\"caret\"></span>";
                                document.getElementById("month").value=6;
                            }
                            function month07() {
                                document.getElementById("monthxiala").innerHTML="07<span class=\"caret\"></span>";
                                document.getElementById("month").value=7;
                            }
                            function month08() {
                                document.getElementById("monthxiala").innerHTML="08<span class=\"caret\"></span>";
                                document.getElementById("month").value=8;
                            }
                            function month09() {
                                document.getElementById("monthxiala").innerHTML="09<span class=\"caret\"></span>";
                                document.getElementById("month").value=9;
                            }
                            function month10() {
                                document.getElementById("monthxiala").innerHTML="10<span class=\"caret\"></span>";
                                document.getElementById("month").value=10;
                            }
                            function month11() {
                                document.getElementById("monthxiala").innerHTML="11<span class=\"caret\"></span>";
                                document.getElementById("month").value=11;
                            }
                            function month12() {
                                document.getElementById("monthxiala").innerHTML="12<span class=\"caret\"></span>";
                                document.getElementById("month").value=12;
                            }
                        </script>
                    </div>
                    <span>月</span>

                    <div class="btn-group">
                        <button id="dayxiala" class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            01<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#6" onclick="day01(this)">01</a></li>
                            <li><a href="#6" onclick="day02(this)">02</a></li>
                            <li><a href="#6" onclick="day03(this)">03</a></li>
                            <li><a href="#6" onclick="day04(this)">04</a></li>
                            <li><a href="#6" onclick="day05(this)">05</a></li>
                            <li><a href="#6" onclick="day06(this)">06</a></li>
                            <li><a href="#6" onclick="day07(this)">07</a></li>
                            <li><a href="#6" onclick="day08(this)">08</a></li>
                            <li><a href="#6" onclick="day09(this)">09</a></li>
                            <li><a href="#6" onclick="day10(this)">10</a></li>
                            <li><a href="#6" onclick="day11(this)">11</a></li>
                            <li><a href="#6" onclick="day12(this)">12</a></li>
                            <li><a href="#6" onclick="day13(this)">13</a></li>
                            <li><a href="#6" onclick="day14(this)">14</a></li>
                            <li><a href="#6" onclick="day15(this)">15</a></li>
                            <li><a href="#6" onclick="day16(this)">16</a></li>
                            <li><a href="#6" onclick="day17(this)">17</a></li>
                            <li><a href="#6" onclick="day18(this)">18</a></li>
                            <li><a href="#6" onclick="day19(this)">19</a></li>
                            <li><a href="#6" onclick="day20(this)">20</a></li>
                            <li><a href="#6" onclick="day21(this)">21</a></li>
                            <li><a href="#6" onclick="day22(this)">22</a></li>
                            <li><a href="#6" onclick="day23(this)">23</a></li>
                            <li><a href="#6" onclick="day24(this)">24</a></li>
                            <li><a href="#6" onclick="day25(this)">25</a></li>
                            <li><a href="#6" onclick="day26(this)">26</a></li>
                            <li><a href="#6" onclick="day27(this)">27</a></li>
                            <li><a href="#6" onclick="day28(this)">28</a></li>
                            <li><a href="#6" onclick="day29(this)">29</a></li>
                            <li><a href="#6" onclick="day30(this)">30</a></li>
                            <li><a href="#6" onclick="day31(this)">31</a></li>
                        </ul>
                        <script>
                            function day01() {
                                document.getElementById("dayxiala").innerHTML="01<span class=\"caret\"></span>";
                                document.getElementById("day").value=1;
                            }
                            function day02() {
                                document.getElementById("dayxiala").innerHTML="02<span class=\"caret\"></span>";
                                document.getElementById("day").value=2;
                            }
                            function day03() {
                                document.getElementById("dayxiala").innerHTML="03<span class=\"caret\"></span>";
                                document.getElementById("day").value=3;
                            }
                            function day04() {
                                document.getElementById("dayxiala").innerHTML="04<span class=\"caret\"></span>";
                                document.getElementById("day").value=4;
                            }
                            function day05() {
                                document.getElementById("dayxiala").innerHTML="05<span class=\"caret\"></span>";
                                document.getElementById("day").value=5;
                            }
                            function day06() {
                                document.getElementById("dayxiala").innerHTML="06<span class=\"caret\"></span>";
                                document.getElementById("day").value=6;
                            }
                            function day07() {
                                document.getElementById("dayxiala").innerHTML="07<span class=\"caret\"></span>";
                                document.getElementById("day").value=7;
                            }
                            function day08() {
                                document.getElementById("dayxiala").innerHTML="08<span class=\"caret\"></span>";
                                document.getElementById("day").value=8;
                            }
                            function day09() {
                                document.getElementById("dayxiala").innerHTML="09<span class=\"caret\"></span>";
                                document.getElementById("day").value=9;
                            }
                            function day10() {
                                document.getElementById("dayxiala").innerHTML="10<span class=\"caret\"></span>";
                                document.getElementById("day").value=10;
                            }
                            function day11() {
                                document.getElementById("dayxiala").innerHTML="11<span class=\"caret\"></span>";
                                document.getElementById("day").value=11;
                            }
                            function day12() {
                                document.getElementById("dayxiala").innerHTML="12<span class=\"caret\"></span>";
                                document.getElementById("day").value=12;
                            }
                            function day13() {
                                document.getElementById("dayxiala").innerHTML="13<span class=\"caret\"></span>";
                                document.getElementById("day").value=13;
                            }
                            function day14() {
                                document.getElementById("dayxiala").innerHTML="14<span class=\"caret\"></span>";
                                document.getElementById("day").value=14;
                            }
                            function day15() {
                                document.getElementById("dayxiala").innerHTML="15<span class=\"caret\"></span>";
                                document.getElementById("day").value=15;
                            }
                            function day16() {
                                document.getElementById("dayxiala").innerHTML="16<span class=\"caret\"></span>";
                                document.getElementById("day").value=16;
                            }
                            function day17() {
                                document.getElementById("dayxiala").innerHTML="17<span class=\"caret\"></span>";
                                document.getElementById("day").value=17;
                            }
                            function day18() {
                                document.getElementById("dayxiala").innerHTML="18<span class=\"caret\"></span>";
                                document.getElementById("day").value=18;
                            }
                            function day19() {
                                document.getElementById("dayxiala").innerHTML="19<span class=\"caret\"></span>";
                                document.getElementById("day").value=19;
                            }
                            function day20() {
                                document.getElementById("dayxiala").innerHTML="20<span class=\"caret\"></span>";
                                document.getElementById("day").value=20;
                            }
                            function day21() {
                                document.getElementById("dayxiala").innerHTML="21<span class=\"caret\"></span>";
                                document.getElementById("day").value=21;
                            }
                            function day22() {
                                document.getElementById("dayxiala").innerHTML="22<span class=\"caret\"></span>";
                                document.getElementById("day").value=22;
                            }
                            function day23() {
                                document.getElementById("dayxiala").innerHTML="23<span class=\"caret\"></span>";
                                document.getElementById("day").value=23;
                            }
                            function day24() {
                                document.getElementById("dayxiala").innerHTML="24<span class=\"caret\"></span>";
                                document.getElementById("day").value=24;
                            }
                            function day25() {
                                document.getElementById("dayxiala").innerHTML="25<span class=\"caret\"></span>";
                                document.getElementById("day").value=25;
                            }
                            function day26() {
                                document.getElementById("dayxiala").innerHTML="26<span class=\"caret\"></span>";
                                document.getElementById("day").value=26;
                            }
                            function day27() {
                                document.getElementById("dayxiala").innerHTML="27<span class=\"caret\"></span>";
                                document.getElementById("day").value=27;
                            }
                            function day28() {
                                document.getElementById("dayxiala").innerHTML="28<span class=\"caret\"></span>";
                                document.getElementById("day").value=28;
                            }
                            function day29() {
                                document.getElementById("dayxiala").innerHTML="29<span class=\"caret\"></span>";
                                document.getElementById("day").value=29;
                            }
                            function day30() {
                                document.getElementById("dayxiala").innerHTML="30<span class=\"caret\"></span>";
                                document.getElementById("day").value=30;
                            }
                            function day31() {
                                document.getElementById("dayxiala").innerHTML="31<span class=\"caret\"></span>";
                                document.getElementById("day").value=31;
                            }
                        </script>
                    </div>
                    <span>日</span>

                    <input id="year" type="hidden" name="year" value="2018">
                    <input id="month" type="hidden" name="month" value="8">
                    <input id="day" type="hidden" name="day" value="1">
                    <input type="hidden" name="houseId" th:value="${house.houseId}">
                    <input type="hidden" name="agentId" th:value="${house.agentId}">
                    <br/><br/>
                    <span style="padding-left: 70px">备注:&nbsp;</span>
                    <!--<textarea style="width: 400px; border-radius: 4px; border: 1px solid #b6bec5" name="remark"></textarea>-->
                    <input style="width: 400px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="remark"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">提交预约</button>
                </div>
            </form>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    $('#myModal').modal(options)
</script>
<!-- 导航栏<nav class="navbar navbar-inverse navbar-fixed-top" style="min-height:0; height: 45px"> -->
<nav th:replace="~{topbar::top}"></nav>

<!-- 二手房大标题、所处链接路径、预约看房按钮 -->
<div class="jumbotron">
    <div class="container">
        <div class="col-md-7">
            <h3 style="font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                <span th:text="${house.houseName}">天鹅湖花园 ，视野好，中间楼层</span>
                <!--<button type="button" class="btn btn-success"style="margin-left: 10rem">预约看房</button>-->
            </h3>
            <div class="row" style="padding-left: 15px">
                <a href="" style="text-decoration: none; color: #686868">易居网</a>
                <span>&nbsp;>&nbsp;</span>
                <a href="" style="text-decoration: none; color: #686868"><span href="" th:text="${house.city}">成都</span>二手房</a>
                <span>&nbsp;>&nbsp;</span>
                <a href="" style="text-decoration: none; color: #686868"><span href="" th:text="${house.estateName}">天鹅湖花园</span>二手房</a>
                <span>&nbsp;>&nbsp;</span>
                <a href="" style="text-decoration: none; color: #686868">当前房源</a>
            </div>
        </div>
        <div class="col-md-5">
            <div class="row" style="text-align: right">
                <form class="form-inline" style="padding-right: 15px" action="/house_list" method="post">
                    <div class="form-group">
                        <input type="text" size="50" class="form-control" id="search" name="title" placeholder="请输入你要查找的二手房">
                    </div>
                    <button type="submit" class="btn btn-default" aria-label="Left Align">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </form>
            </div>
            <div style="text-align: right">
                <button data-toggle="modal" data-target="#myModal" type="button" class="btn btn-success" style="margin-left: 10rem; margin-top: 10px;">预约看房</button>
            </div>
        </div>
    </div>
</div>

<!-- 左侧照片和右侧信息 -->
<div class="container">
    <div class="col-md-8">
        <div class="img-fluid">
            <img src="house04.jpg" th:src="${house.picture}" style="display: block" height="400" width="710">
        </div>
    </div>
    <div class="col-md-4">
        <div class="row" style="padding-left: 20px">
            <h1 style="color: #db4c3f; font-weight: bold; font-size: 46px; display: inline" th:text="${house.price}">440</h1>
            <h5 style="padding-right: 20px;color: #db4c3f; font-weight: bold; font-size: 16px; display: inline">万</h5>
            <h5 style="color: black; font-weight: bold; font-size: 16px; display: inline" th:text="${house.houseUnitprice}">18191元/平米</h5>
        </div>
        <div class="" style="padding-left: unset; padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
        <div class="row" style="padding-left: 20px">
            <h3 style="color: black; font-weight: bold; font-size: 20px; display: inline; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif; padding-right: 45px" th:text="${house.scale}">3室2厅</h3>

            <h3 style="color: black; font-weight: bold; font-size: 20px; display: inline; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;" th:text="${house.houseArea}">241.88</h3>
            <h3 style="color: black; font-weight: bold; font-size: 20px; display: inline; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">平米</h3>
            <div class="" style="padding-left: unset; padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>

            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 20px">小区名称</span>
                <span style=""><a style="text-decoration: underline; color: black" href="" th:href="@{'/estate_detail?estateId='+${estate.estateId}}" th:text="${house.estateName}">天鹅湖花园</a></span>
            </div>

            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 20px">看房时间</span>
                <span style="">提前预约随时可看</span>
            </div>

            <div class="row" style="padding-left: 20px;">
                <span style="color: grey; font-weight: bold; padding-right: 20px">易居编号</span>
                <span style="" href="" th:text="${house.houseId}">10116124923</span>
            </div>
            <div class="" style="padding-left: unset; padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
        </div>
        <div class="row" style="padding-left: 20px">
            <a href="#"><img src="people01.jpg" th:src="${agent.picture}" height="108" width="81"></a>
            <a href="#" style="padding-left: 20px;" th:href="@{'/agent_detail?agentId=' + ${agent.agentId}}">
                <span style="color: black; font-weight: bold; padding-right: 20px; font-size: 16px" th:text="${agent.agentName}">郑海松</span>
            </a>
            <span style="color: red" href="#" id="agentTel" th:text="${agent.telephone}">4008789353</span>
        </div>
        <div class="" style="padding-left: unset; padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
    </div>

</div>

<!-- 基本信息 -->
<div class="container">
    <div class="row" style="padding-left: 20px">
        <div style="width: 700px">
            <div class="title" style="padding-left: 30px">
                <h2>基本信息</h2>
            </div>
        </div>
    </div>
    <div class="" style="padding-left: unset; padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>

    <div class="container">
        <!-- 基本属性 -->
        <div class="col-md-6">
            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <h3 style="font-weight: bold; padding-bottom: 10px">基本属性</h3>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="col-md-6">
            <div class="row" style="padding-left: 13px; display: inline;">
                <div style="display: inline">
                    <span style="color: grey; padding-right: 20px">房屋户型</span>
                    <span style="color: black; padding-right: 25rem" th:text="${house.scale}">3室2厅1厨3卫</span>
                </div>
            </div>
            <div class="row" style="padding-left: 13px; display: inline">
                <div style="display: inline; padding-bottom: 15px">
                    <span style="color: grey; padding-right: 20px">所在楼层</span>
                    <span style="color: black; padding-right: 20px" th:text="${house.floor}">低楼层</span>
                </div>
            </div>
            <div class="row" style="padding-left: 13px; display: inline">
                <div style="display: inline">
                    <span style="color: grey; padding-right: 20px">建筑面积</span>
                    <span style="color: black" th:text="${house.houseArea}">241.88</span>
                    <span style="color: black; padding-right: 25rem">平米</span>
                </div>
            </div>
            <div class="row" style="padding-left: 13px; display: inline;">
                <div style="display: inline">
                    <span style="color: grey; padding-right: 20px">挂牌时间</span>
                    <span style="color: black; padding-right: 25rem" th:text="${house.createTime}">2018-05-21</span>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row" style="padding-left: 13px; display: inline;">
                <div style="display: inline; padding-bottom: 15px">
                    <span style="color: grey; padding-right: 20px">建筑朝向</span>
                    <span style="color: black; padding-right: 20px" th:text="${house.orientation}">西</span>
                </div>
            </div>
            <div class="row" style="padding-left: 13px; display: inline;">
                <div style="display: inline; padding-bottom: 15px">
                    <span style="color: grey; padding-right: 20px">装修情况</span>
                    <span style="color: black; padding-right: 20px" th:text="${house.decoration}">精装</span>
                </div>
            </div>
            <div class="row" style="padding-left: 13px; display: inline;">
                <div style="display: inline; padding-bottom: 15px">
                    <span style="color: grey; padding-right: 20px">配备电梯</span>
                    <span style="color: black; padding-right: 20px" th:text="有" th:if="${house.hasLift}"></span>
                    <span style="color: black; padding-right: 20px" th:text="无" th:unless="${house.hasLift}"></span>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>